<script setup>
import {ref, computed} from "vue";
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

// 页面导航方法
const navigateTo = (path) => {
  router.push(path);
};

// 计算当前激活的导航项
const activeTab = computed(() => route.path);

// 页面导航方法
// const navigateToHome = () => {
//   router.push('/')
// }
//
// const navigateToForum = () => {
//   router.push('/forum')
// }
//
// const navigateToRobot = () => {
//   router.push('/robot')
// }
//
// const navigateToProfile = () => {
//   router.push('/profile')
// }

</script>

<template>
  <!-- 固定底部导航栏 -->
  <div class="fixed-tab-bar">
    <div class="tab-item"
         :class="{ active: activeTab === '/' }"
         @click="navigateTo('/')">
      <i class="home-icon"></i>
      <img src="../../assets/img/phone/home.png" alt="home">
      <span>首页</span>
    </div>

    <div class="tab-item"
         :class="{ active: activeTab === '/forum' }"
         @click="navigateTo('/forum')">
      <i class="forum-icon"></i>
      <img src="../../assets/img/phone/talk.png" alt="talk">
      <span>论坛</span>
    </div>

    <div class="tab-item"
         :class="{ active: activeTab === '/robot' }"
         @click="navigateTo('/robot')">
      <i class="robot-icon"></i>
      <img src="../../assets/img/phone/product.png" alt="product">
      <span>选品</span>
    </div>

    <div class="tab-item"
         :class="{ active: activeTab === '/profile' }"
         @click="navigateTo('/profile')">
      <i class="profile-icon"></i>
      <img src="../../assets/img/phone/my.png" alt="my">
      <span>我的</span>
    </div>
  </div>
</template>

<style scoped>
/* 固定底部导航栏样式 */
.fixed-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.tab-item i {
  font-size: 20px;
  margin-bottom: 3px;
}

.tab-item span {
  font-size: 12px;
}

/* 高亮效果 */
.tab-item.active {
  color: #48a1e3;
  font-weight: bold;
}

.tab-item.active img {
  filter: brightness(0.7) sepia(1) hue-rotate(190deg); /* 图片变蓝 */
}
</style>